<?php 

$baseurl= HOME . $data['category']['alias'] . '/' . $_GET['id'] . '.html';
$baseurl1= HOME . $data['category']['alias'] . '/' . $_GET['id'] . '.html'; 
$pageSeparator = '?';

if(isset($_GET['type'])){
	$pageSeparator = '&';
	$baseurl1 .= '?type=' . $_GET['type'];
	$likedesc =$baseurl1.'&ext=likes&sort=desc';
	$likeasc = $baseurl1.'&ext=likes&sort=asc';
	$viewdesc =$baseurl1.'&ext=views&sort=desc';
	$viewasc =$baseurl1.'&ext=views&sort=asc';
	$commentdesc = $baseurl1.'&ext=comments&sort=desc';
	$commentasc = $baseurl1.'&ext=comments&sort=asc';
	$datedesc = $baseurl1.'&ext=date&sort=desc';
	$dateasc = $baseurl1.'&ext=date&sort=asc';
}else{

	$likedesc = $baseurl.'?ext=likes&sort=desc';
	$likeasc = $baseurl.'?ext=likes&sort=asc';
	$viewdesc =$baseurl. '?ext=views&sort=desc';
	$viewasc = $baseurl.'?ext=views&sort=asc';
	$commentdesc =$baseurl.'?ext=comments&sort=desc';
	$commentasc =$baseurl.'?ext=comments&sort=asc';
	$datedesc = $baseurl.'?ext=date&sort=desc';
	$dateasc =$baseurl.'?ext=date&sort=asc';
}

if(isset($_GET['ext'])){ $pageSeparator = '&'; $appendExt = "&ext=".$_GET['ext']."&sort=".$_GET['sort']; }else{$appendExt = '';}


 ?>
<div id="wrapMain">
	<div id="innerMain">
		<div class="row">
        
        
    <div class="pull-left head_text btn btn-danger btn-sm" >  <?php echo $data['category']['name'];  ?></div>    
    
    <div class="btn-group pull-right">

  
  
  
  
  
 <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
    Tùy Chọn <span class="caret" style="color:#fff"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
   
      <li><a href="<?php echo $baseurl;?>?type=picture">Hỉnh Ảnh </a></li>
      	<li><a href="<?php echo $baseurl;?>?type=video">Video </a></li>
      	 <li><a href="<?php echo $baseurl;?>?type=text">Bài Viết</a></li>
       
          	<li><a href="<?php echo $datedesc ?>"><i class="icon-time"></i> Thời gian (Mới <i class="icon-long-arrow-right"></i>) </a></li>
      <li><a href="<?php echo $dateasc ?>"><i class="icon-time"></i>  Thời gian (Cũ <i class="icon-long-arrow-right"></i>)</a></li>

       <li><a href="<?php echo $viewdesc ?>"><i class="icon-eye-open"></i> View (Nhiều <i class="icon-long-arrow-right"></i>) </a></li>
      <li><a href="<?php echo $viewasc ?>"><i class="icon-eye-open"></i> View (Ít <i class="icon-long-arrow-right"></i>)</a></li>
      
    
    <li><a href="<?php echo $likedesc ?>"><i class="icon-facebook-sign"></i> Like (Nhiều <i class="icon-long-arrow-right"></i>) </a></li>
      <li><a href="<?php echo $likeasc ?>"><i class="icon-facebook-sign"></i> Like ( Ít <i class="icon-long-arrow-right"></i>)</a></li>

       <li><a href="<?php echo $commentdesc ?>/comments/desc"><i class="icon-comment"></i> Comment ( Nhiều <i class="icon-long-arrow-right"></i> ) </a></li>
      <li><a href="<?php echo $commentasc ?>/comments/asc"><i class="icon-comment"></i>  Comment ( Ít <i class="icon-long-arrow-right"></i> )</a></li>
  </ul>
  
  
 
  </div>
</div>
     <div class="clearfix"></div>
     <div style="height:20px"></div>   
        
      
<?php
		//POST RENDER GRID VIEW DATA
		
		$page = isset($_GET['page']) ? $_GET['page'] : 1;
		post_render_grid($data['info'], '', '', $page);
		$max_page = $data['page'];

?>

		<nav id="page-nav">
			<a href="index.php?module=ajax&act=ajax&case=6&id=<?php echo $_GET['id'];?><?php if(isset($_GET['type'])){ echo "&type=".$_GET['type'];} ?>&t=load_more_items&page=<?= $page; ?><?php if(isset($_GET['ext'])){ echo "&ext=".$_GET['ext']."&sort=".$_GET['sort']; } ?>"></a>
		</nav>
		
		<div class="loading" id="mainLoading"><div id="loadMoreItems" class="normalLoadBtn"><img width="20" src="public/images/loading.gif" alt="loading" /> Loading </div><div class="clr"></div></div>
		<div id="next-page"></div>



		</div><!-- end .row -->
	</div><!-- end innerMain -->
</div><!-- end wrapMain -->
		
   <script>
  $(function(){
	mw = getItemWidth();
    var max_page = <?= $max_page ?>;
    var $container = $('#contentIndex');
    
    $container.imagesLoaded(function(){
    	 
      $container.masonry({
        itemSelector: '.item',
          columnWidth:mw,
		isFitWidth: true
      });
    });
    var nextSelector = '#page-nav a';
    var origNextUrl = $(nextSelector).attr('href');

    var pageRegex = /(page=)([0-9]+)/;
    var page  = origNextUrl.match(pageRegex)[2];
    var mypage = page;

    
    var loadedTime = 0;
    $container.masonry( 'on', 'removeComplete', function( msnryInstance, removedItems ) {$('#mainLoading').hide();} )
    $container.infinitescroll({
	    navSelector  : '#page-nav',    // selector for the paged navigation 
	    nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
	    itemSelector : '.item',     // selector for all items you'll retrieve
	        
	    path: function(pageNum) {
		    $('#mainLoading').show();
		    newPage = mypage + 1;
	    	previousPage = parseInt(<?= $page; ?>) - parseInt(<?= LOAD_TIME; ?>);
	    	if(previousPage == 0) previousPage = 1;
	    	if(previousPage < 0) previousPage = null;
	    	previousUrl = '<?= $baseurl1 . $appendExt; ?>';
			previousUrl += '<?= $pageSeparator ?>page=' + previousPage;
		    
			if(parseInt(mypage) >= parseInt(max_page)){
				$('#mainLoading').hide();
				if(previousPage != null){
					$('#next-page').append('<div class="normalLoadBtn" id="previousPage"><a style="color: #fff" href="'+previousUrl+'"><i class=" icon-long-arrow-left"></i> Bài cũ hơn</a></div>');
				}
				$('#next-page').append('<div class="normalLoadBtn" id="nextPage">Hết dữ liệu</div>');
				return;
			}
		    
	        if(loadedTime > 0 && ((mypage + 1) % <?= LOAD_TIME ?> == 0) && mypage > 1 ){
		        $('#mainLoading').hide();
		        nextUrl = '<?= $baseurl1 . $appendExt; ?>';
		        nextUrl += '<?= $pageSeparator ?>page=' + newPage;
		        if(previousPage != null){
					$('#next-page').append('<div class="normalLoadBtn" id="previousPage"><a style="color: #fff" href="'+previousUrl+'"><i class=" icon-long-arrow-left"></i> Bài cũ hơn</a></div>');
				}
				$('#next-page').append('<div class="normalLoadBtn" id="nextPage"><a style="color: #fff" href="'+nextUrl+'">Xem tiếp <i class=" icon-long-arrow-right"></i></a></div>');
	        }
	        
	        mypage++;
	        loadedTime++;
	        
	        return origNextUrl.replace( pageRegex, ("$1" + (mypage)));
        }
    },
      
      
      
      // trigger Masonry as a callback
      function( newElements ) {
    	$.each(newElements, function(e, index){
			attrHref = $(index).find('.hoverUnderline').attr('href');
			
			item = $(index).find('.innerItem');
			id = $(item).attr('data-href');
			type = $(item).attr('data-rel');
			//$(item).append('<div style="width:70px;" class="fb-like" data-href="'+attrHref+'" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>');
			//$(item).append('<div class="fb-comments" data-href="'+attrHref+'" data-numposts="2" data-width="380"></div>');
			FB.XFBML.parse(document.getElementById('innerItem-' + id + '-' + type));
			//$(index).find(');
			$(index).find('.hoverUnderline').attr('href', attrHref + '&pagerel=' + mypage);
		});
        // hide new items while they are loading
        var $newElems = $( newElements ).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
          // show elems now they're ready
          $newElems.animate({ opacity: 1 });
          $('.video_play_icon').center();
          $('.gif_play_icon').center();
          $container.masonry( 'appended', $newElems, true ); 
		   mw = getItemWidth();
		   $container.masonry({
              itemSelector: '.item',
              columnWidth:mw,
      		isFitWidth: true
            });
          $('#mainLoading').hide();
        });
      }
    );
    // Auto resize
	
  $(window).resize(function(){
   
      	  mw = getItemWidth();
		 $container.masonry( 'option', { columnWidth:mw });
	});
	// End of auto reisze
  });
</script>     
<!-- end #wrapMain -->	